// 主要内容
.main {
    // background-color: aquamarine;

    // 轮播图
    .swiper-container {
        height: 200px;
        background-color: #eeff00;

        .swipbg {
            width: 414px;
            height: 200px;
        }
    }

    // 主体内容
    .mainContent {
        // background-color: #0077ff;
        margin: 20px 15px 15px 15px;

        .item1 {
            height: 150px;

            // background-color: #00ff1a;
            // 左
            .item1L {
                width: 150px;
                height: 150px;
                background-color: #d0ff00;
                line-height: 20px;
                border-radius: 15px 15px 15px 15px;
                background-color: rgba(21, 146, 204, 0.73);
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                text-align: center;
                font-family: Arial;
                position: relative;
                overflow: hidden;

                .rank {
                    width: 80px;
                    margin-top: 15px;
                    margin-left: 14px;
                    color: #004E73;
                    font-size: 20px;
                    position: relative;
                    z-index: 2;
                    // font-family: PingFangSC-bold;
                }

                .nine {
                    margin-top: 38px;
                    margin-left: 25px;
                    width: 48px;
                    height: 112px;
                    color: rgba(255, 255, 255, 1);
                    font-size: 80px;
                    position: relative;
                    z-index: 2;

                    #rankNo {
                        font-size: 50px;
                    }

                    // font-family: PingFangSC-bold;
                }

                .rankBg {
                    width: 120px;
                    height: 110px;
                    background: url('../../assets/imgs/index-card-rank.png') no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 36px;
                    right: 48px;
                    opacity: 0.4;
                }
            }

            // 右
            .item1R {
                width: 212px;
                height: 150px;
                background-color: #a6ff00;
                line-height: 20px;
                border-radius: 15px 15px 15px 15px;
                background-color: rgba(123, 203, 245, 0.73);
                color: rgba(16, 16, 16, 1);
                font-size: 14px;
                text-align: center;
                font-family: Arial;
                position: relative;

                .card {
                    width: 140px;
                    margin-top: 15px;
                    margin-left: 14px;
                    color: #004E73;
                    font-size: 20px;
                    position: relative;
                    z-index: 2;
                    // font-family: PingFangSC-bold;


                }

                .dayCard {
                    // box-sizing: border-box;
                    width: 100px;
                    // height: 40px;
                    line-height: 35px;
                    border-radius: 20px;
                    background-color: rgba(170, 217, 247, 1);
                    color: rgba(0, 78, 115, 1);
                    font-size: 16px;
                    text-align: center;
                    font-family: Arial;
                    border: 3px solid rgba(0, 81, 119, 1);
                    position: absolute;
                    top: 85px;
                    left: 97px;
                    z-index: 2;
                }

                .cardBg {
                    width: 110px;
                    height: 110px;
                    background: url('../../assets/imgs/index-card-sum.png') no-repeat;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 30px;
                    left: 10px;
                    opacity: 0.67;
                }

                .locked {
                    background-color: #679fff;
                }

            }
        }

        .item2 {
            height: 110px;

            // 左
            .item2L {
                width: 180px;
                height: 110px;
                // background-color: #00ff2a;
                background: url('../../assets/imgs/index-card-data.png');
                background-size: 100%;
                overflow: hidden;

                p {

                    margin-left: 14px;
                    margin-top: 12px;
                    color: rgba(255, 255, 255, 1);
                    font-size: 16px;
                }
            }

            // 右
            .item2R {
                width: 185px;
                height: 110px;
                // background-color: #00ff1a;
                background-color: rgba(109, 167, 248, 0.58);
                position: relative;
                overflow: hidden;

                .accum {
                    margin-left: 14px;
                    margin-top: 12px;
                    color: rgba(0, 81, 119, 1);
                    font-size: 16px;
                }

                .numBox {
                    margin-left: 104px;
                    margin-top: -10px;


                    .three {
                        color: rgba(0, 78, 115, 1);
                        font-size: 80px;
                        margin-right: 1px;
                    }

                    .num {
                        height: 20px;
                        color: rgba(0, 81, 119, 1);
                        font-size: 18px;
                        margin-top: 50px;
                    }

                    .numBg {
                        width: 90px;
                        height: 90px;
                        background: url('../../assets/imgs/index-card-badge.png') no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        top: 30px;
                        left: 10px;
                        opacity: 0.8;
                    }
                }
            }
        }

        .itemCommon {
            width: 385px;
            height: 110px;
            // background-color: #00ff1a;
            position: relative;

            .comA {
                width: 385px;
                height: 110px;
                position: absolute;
                top: 0;
                left: 0;
            }

        }

        .item3 {
            border-radius: 15px;
            background: url(../../assets/imgs/course-img04.jpg);
            background-size: 100%;
            background-position: 0px -12px;
            overflow: hidden;

            p {
                margin-left: 14px;
                margin-top: 12px;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
            }
        }

        .item4 {
            background: url(../../assets/imgs/course-img02.png);
            background-size: 100%;
            background-position: 10px -45px;
            overflow: hidden;

            p {
                margin-left: 14px;
                margin-top: 12px;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
            }
        }
    }
}